<template>
  <a-modal
    :title="`优惠券${model ? '编辑' : '新增'}`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['id']" disabled />
        </a-form-item>
        <a-form-item label="优惠券类型">
          <a-select v-decorator="['type', { initialValue: 1 }]" placeholder="选择类型">
            <a-select-option :value="index" v-for="(item, index) in type" :key="index">{{
              item
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="折扣类型">
          <a-select v-decorator="['genre', { initialValue: 0 }]" placeholder="选择优惠券类型">
            <a-select-option :value="Number(index)" v-for="(item, index) in Genre" :key="index">{{
              item
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <div v-show="form.getFieldValue('genre') === 1">
          <a-form-item label="满减价格">
            <a-input-number v-decorator="['full_price']" :step="1" placeholder="填写满减价格" />
          </a-form-item>
          <a-form-item label="折扣价格">
            <a-input-number v-decorator="['minus_price']" :step="1" placeholder="填写折扣价格" />
          </a-form-item>
        </div>
        <a-form-item label="折扣" v-show="form.getFieldValue('genre') === 0">
          <a-input-number v-decorator="['discount']" :step="0.1" placeholder="填写折扣,保留小数点1位" />
        </a-form-item>
        <a-form-item label="开始日期">
          <a-date-picker v-decorator="['atime']" />
        </a-form-item>
        <a-form-item label="结束日期">
          <a-date-picker v-decorator="['etime']" />
        </a-form-item>
        <a-form-item label="优惠券场景">
          <a-select v-decorator="['discount_status', { initialValue: 0 }]" placeholder="选择优惠券场景">
            <a-select-option :value="Number(index)" v-for="(item, index) in discountStatus" :key="index">{{
              item
            }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="是否上架">
          <a-select v-decorator="['status', { initialValue: 0 }]" placeholder="是否上架">
            <a-select-option :value="1">是</a-select-option>
            <a-select-option :value="0">否</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { TYPE, DISCOUNT_STATUS, GENRE } from '@/mixins/coupon'
import { couponAdd, couponEdit } from '@/api/coupon'
import formModalMixin from '@/mixins/formModalMixin'
// 表单字段
const fields = ['type', 'id', 'status', 'discount', 'discount_status', 'atime', 'etime', 'minus_price', 'full_price', 'genre']

export default {
  mixins: [formModalMixin],
  data () {
    this.type = TYPE
    this.discountStatus = DISCOUNT_STATUS
    this.Genre = GENRE
    this.editAction = couponEdit
    this.addAction = couponAdd
    this.fields = fields
    return {}
  }
}
</script>
